<template>
  <div class="resource-list">
    <el-card class="box-card">
      <template v-slot:header class="clearfix">
        <el-form ref="elform" :inline="true" :model="form" class="demo-form-inline">
          <el-form-item prop="name" label="资源名称">
            <el-input v-model="form.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item prop="url" label="资源路径">
            <el-input v-model="form.url" placeholder=""></el-input>
          </el-form-item>
          <el-form-item prop="categoryId" label="资源分类">
            <el-select clearable v-model="form.categoryId" placeholder="请选择资源分类">
              <el-option
                v-for="item in resourceCategories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="isLoading" type="primary" @click="onSubmit">查询搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="isLoading" type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table v-loading="isLoading" :data="resources" style="width: 100%; margin-bottom: 20px;">
        <el-table-column type="index" label="编号" width="180"> </el-table-column>
        <el-table-column prop="name" label="资源名称" width="180"> </el-table-column>
        <el-table-column prop="url" label="资源路径"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="createdTime" label="添加时间"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :disabled="isLoading"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.current"
        :page-sizes="[5, 10, 20]"
        :page-size="form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getResourcePages } from '/@/services/Resource'
import { getResourceCategories } from '/@/services/ResourceCategory'

export default defineComponent({
  name: 'ResourceList',
  setup() {
    const resources = ref([]) // 资源列表
    const form = ref({
      name: '',
      url: '',
      current: 1, // 默认查询第1页数据
      size: 5, // 每页大小
      categoryId: null // 资源分类
    })
    const totalCount = ref(0)
    const resourceCategories = ref([{}])
    const isLoading = ref(false) // 加载状态

    const loadResources = async () => {
      isLoading.value = true
      const { data } = await getResourcePages(form.value)
      resources.value = data.data.records
      totalCount.value = data.data.total
      isLoading.value = false
    }

    const handleSizeChange = (size: number) => {
      // console.log(`每页 ${size} 条`)
      form.value.size = size
      form.value.current = 1
      loadResources()
    }

    const handleCurrentChange = (page: number) => {
      // console.log(`当前页: ${page}`)
      // 请求获取对应页码的数据
      form.value.current = page
      loadResources()
    }

    const onSubmit = () => {
      form.value.current = 1
      loadResources()
    }

    const elform = ref(null)
    const onReset = async () => {
      if (elform.value) {
        ;(elform.value as ElForm).resetFields()
        form.value.current = 1
        loadResources()
      }
    }

    const loadResourceCategories = async () => {
      const { data } = await getResourceCategories()
      resourceCategories.value = data.data
    }

    const handleDelete = (item: any) => {
      console.log('handleDelete', item)
    }

    const handleEdit = (item: any) => {
      console.log('handleEdit', item)
    }

    return {
      resources,
      form,
      totalCount,
      loadResources,
      loadResourceCategories,
      handleSizeChange,
      handleCurrentChange,
      onSubmit,
      resourceCategories,
      elform,
      onReset,
      isLoading,
      handleDelete,
      handleEdit
    }
  },
  created() {
    this.loadResources()
    this.loadResourceCategories()
  }
})
</script>

<style lang="scss" scoped></style>
